<template>
  <div class="app-container" style="width: 100%">
    <SearchForm :searchHandle="searchHandle" />
    <Table
      :loading="tabloading"
      isHidden
      :tableData="tableData"
      :rowHeader="rowHeader"
      :tableOption="tableOption"
      @handleButton="handleButton"
    />
    <el-dialog
      :visible="dialogVisible"
      :title="dialogType === 'new' ? '添加项目' : '编辑项目'"
      :close-on-click-modal="false"
      @close="dialogVisible = false"
    >
      <SearchForm
        :rules="Dialogrules"
        class="dialogSearch"
        :label-width="'150px'"
        :inline="true"
        ref="searchForm"
        :searchForm="DialogForm"
        :searchData="DialogData"
        :search-handle="dialogHandle"
        @goback="goback"
      />
    </el-dialog>
  </div>
</template>

<script>
import SearchForm from "@/components/searchForm/index.vue";
import Table from "@/components/Table/baseTable";
import { AddQuery, UserQuery, DelQuery } from "@/api/mange.js";
import { Task } from "@/api/task.js";

export default {
  name: "DirectivePermission",
  components: {
    SearchForm,
    Table,
  },
  data() {
    return {
      dialogVisible: false,
      dialogType: "new",
      tableData: [],
      tabloading: false,
      projectId: "",
      rowHeader: [
        {
          label: "项目名称",
          prop: "projectName",
        },
        {
          label: "成员数量",
          prop: "peopleNum",
        },
        {
          label: "创建人",
          prop: "createByName",
        },
        {
          label: "任务数量",
          prop: "taskNum",
        },
      ],
      tableOption: {
        label: "操作",
        width: "340px",
        options: [
          {
            persstion: "",
            methods: "edit",
            label: "编辑",
            type: "primary",
          },
          {
            persstion: "",
            label: "删除",
            methods: "delete",
            type: "danger",
          },
        ],
      },
      searchHandle: [
        {
          type: "primary",
          label: "添加",
          persstion: "",
          handle: () => {
            this.dialogVisible = true;
            this.dialogType = "new";
            this.DialogData = {
              projectName: "",
              createById: "",
            };
          },
        },
      ],
      DialogData: {
        projectName: "",
        createById: "",
      },
      DialogForm: [
        {
          label: "项目:",
          type: "Input",
          prop: "projectName",
          options: [],
          class: "projectInp",
          placeholder: "请输入项目名称",
          clearable: true,
          clear: () => {},
          change: (val) => {},
          InputWidth: "width:42%",
        },
        {
          label: "创建人:",
          type: "Select",
          prop: "createById",
          options: [],
          change: (val) => {},
          clear: () => {},
          clearable: true,
          InputWidth: "width:42%",
        },
      ],
      Dialogrules: {
        projectName: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur",
          },
        ],
      },
      dialogHandle: [
        {
          type: "primary",
          label: "确定",
          handle: (item) => {
            this.dialogVisible = false;
            if (this.dialogType == "new") {
              AddQuery({
                projectName: this.DialogData.projectName,
                createById: this.DialogData.createById,
                createByName: this.DialogData.createByName,
              }).then((res) => {
                this.$message({
                  type: "success",
                  message: "添加成功!",
                });
                this.queryTask();
              });
            } else if (this.dialogType == "edit") {
              AddQuery({
                projectName: this.DialogData.projectName,
                createByName: this.DialogData.createByName,
                id: this.DialogData.id,
                createById: this.DialogData.createById,
              }).then((res) => {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.queryTask();
              });
            }
          },
        },
        {
          type: "primary",
          label: "关闭",
          handle: () => {
            this.dialogVisible = false;
          },
        },
      ],
    };
  },
  mounted() {
    this.queryTask();
    this.userQuery();
  },
  methods: {
    goback(item) {
      this.dialogVisible = false;
    },
    userQuery() {
      this.DialogForm[1].options = [];
      UserQuery({}).then((res) => {
        res.result.map((item) => {
          this.DialogForm[1].options.push({
            label: item.name,
            value: item.id,
          });
        });
      });
    },
    queryTask() {
      Task({}).then((res) => {
        if (res.code == "200") {
          this.tableData = res.result;
        }
      });
    },
    handleButton(methods, data, row, index) {
      if (methods == "edit") {
        this.dialogVisible = true;
        this.dialogType = "edit";
        this.DialogData = row;
      } else if (methods == "delete") {
        this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-custom-cancel",
          type: "warning",
        })
          .then(() => {
            DelQuery({
              id: row.id,
            }).then((res) => {
              this.queryTask();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else if (methods == "Reset") {
        // forgetUserPwdTwo({
        //   userId: row.id,
        //   passWard: 123456,
        // }).then((res) => {
        //   if (res.code == 200) {
        //     this.$message.success("重置密码成功");
        //   }
        // });
      }
    },
  },
};
</script>

<style lang="scss">
.app-container {
  .nameInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .useNameInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .adminInp {
    .el-form-item__content {
      width: 73%;
      .el-select {
        width: 100%;
      }
    }
  }
  .phoneInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .emailInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .passwordInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .dialogSearch {
    border: none;
    .InlineBlock {
      display: flex;
      justify-content: end;
      margin-right: 8%;
      margin-top: 6%;
    }
  }
}
</style>

